<template>
  <div class="tree-com">
    <div class="search-input">
      <!-- <el-input
        size="small"
        placeholder="输入关键字进行过滤"
        v-model="filterText">
      </el-input> -->
      <el-input v-model="filterText" size="small" class="input" placeholder="输入关键字进行过滤" @keyup.enter.native="handleSearch">
        <el-button type="primary" size="small" class="inquire" @click="handleSearch" slot="append">搜索</el-button>
      </el-input>
    </div>
    <div class="el-tree-div">
      <el-tree
        :data="treeDatas"
        show-checkbox
        default-expand-all
        node-key="id"
        ref="tree"
        highlight-current
        :props="defaultProps"
        :filter-node-method="filterNode"
        @check="nodeCheck">
      </el-tree>
    </div>
    <div class="tree-com-tip">注：最多选择5条法规同时对比</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      filterText: '',
      treeDatas: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  mounted () {
    this.lawMenu()
  },
  watch: {
    filterText (val) {
      if (!val) {
        this.$refs.tree.filter(val)
        this.disableNodes(false)
      }
    }
  },
  methods: {
    handleSearch () {
      this.$refs.tree.filter(this.filterText)
      this.disableNodes(true)
    },
    setCheckedNodes (nodes) {
      this.$refs.tree.setCheckedNodes(nodes)
    },
    filterNode (value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    nodeCheck (e, { checkedNodes }) {
      let currentNodes = this.formattNodes(checkedNodes)
      this.$emit('changeCurrentNodes', currentNodes)
    },
    formattNodes (checkedNodes) {
      let res = []
      checkedNodes.map(e => {
        if (e.value) {
          res.push({
            id: e.id,
            label: e.label,
            value: e.value
          })
        }
      })
      return res
    },
    disableNodes (disabled = false) {
      this.treeDatas.map(e => {
        e['disabled'] = disabled
      })
    },
    lawMenu () {
      this.$api.lawMenu().then(res => {
        let data = res.data
        data.map(e => {
          e['disabled'] = false
        })
        this.treeDatas = data
      }).catch(e => {
        console.error(e)
        this.$msgMnger.error(e.msg)
      })
    }
  }
}
</script>

<style lang="scss" scoped>

.tree-com{
  height: 100%;
  .search-input{
    padding: 20px;
    background: $box-title-bg-color;
  }
  .el-tree-div{
    height: calc(100% - 100px);
    overflow-y: auto;
    .el-tree{
      overflow: hidden;
    }
  }
  .tree-com-tip{
    background: $box-title-bg-color;
    padding: 5px 20px;
    color: $sedondary-text-color;
  }
}
</style>

<style lang="scss">

.tree-com {
  .el-tree-node__label{
    width: calc(100% - 50px);
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .el-input-group__append {
    background-color: $primary-color !important;
    color: white;
  }
  .el-input-group__append{
    border: none;
  }
  .el-input__inner{
    border-right: none;
  }
}
</style>
